<template>
	<view>
		<view class="swiper-dot">
			<view :class="{'active':active}">
				<!-- <uni-icons type="image-filled" size="12" color="#ffffff" style="margin-right: 10rpx;"></uni-icons> -->
				<image src="https://cdn1.visiotrip.com/h5AndMini/img_icon.png" class="img-icon"></image>
				<text>{{ current }}</text>
				/
				<text style="margin-right: 9rpx;">{{ dotLength }}</text>
				<uni-icons type="right" size="12" color="#ffffff"></uni-icons>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	name: "swiperDot",
	props: {
		current: {
			type: Number,
			value: 1,
		},
		dotLength: {
			type: Number,
			value: 1,
		},
		active:{
			type: Boolean,
			default: false,
		}
	},
	data() {
		return {

		};
	}
}
</script>

<style>
.swiper-dot {
	height: 640rpx;
	position: relative;
}

.swiper-dot view {
	display: flex;
	align-items: center;
	background: #000000;
	opacity: 0.5;
	border-radius: 24rpx;
	padding: 12rpx;
	color: #ffffff;
	align-items: center;
	position: absolute;
	top: 625rpx;
	/* left: 600rpx; */
	z-index: 99;
	font-size: 24rpx;
	width: fit-content;
	right: 6rpx;
}
.swiper-dot view.active{
	top: 580rpx;
	right: 6rpx;
}
.img-icon {
	width: 21rpx;
	height: 21rpx;
	margin-right: 10rpx;
}
</style>
